<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市分配</title>
    <script type="text/javascript">
        LAMJS.run(function() {
            'use strict';
            var System = this;
            var PLUGINS = System.Config.Public.PLUGINS;
            System.use();
            System.Loader
                    .load({
                        'baseUrl':System.COMMON,
                        'suffix':'.css',
                        'rel':'stylesheet',
                        'css':[
                            '/plugins/bootstrap/bootstrap'
                            ,'/plugins/jstree/dist/themes/default/style.min.css'
                        ]
                    })
                    .print();

            System
                    .import(['/artTemplate/artTemplate','/bootstrap/bootstrap'],PLUGINS)
                    .import(['/Dropdown.class'],System.classPath);


        });

    </script>
    <style>
        html { margin:0; padding:0; font-size:62.5%; }
        body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
        h1 { font-size:1.8em; }
        .demo { overflow:auto; border:1px solid silver; min-height:100px; }

        .jstree-node{position: relative}
        .dropdown .btn{position: absolute;top:-23px;left:95px;}
    </style>

</head>
<body>




<div id="citySelectWarp">

</div>

<!--模板-->
<script id="citySelect" type="text/html">
    <div class="jstree jstree-1 jstree-default">
        <ul class="jstree-container-ul jstree-children" role="group">
            <% for(var i=1;i<=5;i++){%>
            <li  aria-level="1" class="jstree-node  jstree-open jstree-last" boot-dropdown-tag="parent_<%=i%>">
                <i class="jstree-icon jstree-ocl" role="presentation"></i>
                <input type="checkbox" tree-input="checkbox" /> 组<%=i%>
                <div class="dropdown">
                    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <span boot-dropdown-tag="text"><%=city%></span>
                        <span class="caret"></span>
                    </button>
                </div>
                <ul role="group" class="jstree-children">
                    <% for(var j=0;j < data.length;j++){%>
                    <li role="treeitem" aria-level="2"
                        class="jstree-node  jstree-leaf" boot-dropdown-tag="select_<%=j+1%>">
                        <i class="jstree-icon jstree-ocl" role="presentation"></i>子账号组<%=j+1%>
                        <div class="dropdown">
                            <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span boot-dropdown-tag="text"></span>
                                <span class="caret"></span>
                            </button>
                            <input type="hidden" boot-dropdown-tag="input" value="">
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" boot-dropdown-tag="list">
                                <% for(var k=0;k < data[j].length;k++){%>
                                <li data-id="<%=data[j][k]['id']%>"><a href="#"><%=data[j][k]['area_name']%></a></li>
                                <% }%>
                            </ul>
                        </div>
                    </li>
                    <% }%>


                </ul>
            </li>
            <% }%>
        </ul>
    </div>
</script>
<script type="text/javascript">
    LAMJS.run([jQuery],function($) {
        'use strict';
        var System = this;

        var COMMON = System.Config.Public.COMMON;

        var citySelect = {
            'run':function(){
                var len = $('[boot-dropdown-tag^="parent"]').length;
                for(var i=1;i<=len;i++){
                    this.init('[boot-dropdown-tag="parent_'+i+'"]');

                }
            },
            'init':function(parent){
                var len =$(parent+' [boot-dropdown-tag^="select"]').length;
                var city;
                var objs=[];
                for(var i=1;i<=len;i++){
                    city = new System.Dropdown({
                        'select' : parent+' [boot-dropdown-tag="select_'+i+'"]'
                    });
                    objs.push(city);
                }

                System.each(objs,function(){
                    (function(city){
                        city.run(function(){
                            city.add();
                            city.delOption(city.ID);
                            System.each(objs,function(){
                                (function(city2){
                                    if(city2 === city){
                                        return;
                                    }
                                    city2.delOption(city.ID);
                                })(this);

                            });
                        });
                    })(this);

                });
            }
        };

        jQuery(function($){
            var cities = [];
            var index=0;



            $.getJSON( COMMON+"/data/cities.json", function( data ) {

                System.each(data.cities,function(){
                    if(index > 6) return true;
                    index++;
                    cities.push(this.area_name);
                });
                //var arr=GT.Tools.array_chunk(data.cities,Math.ceil(data.cities.length/3));
                var arr =[
                    data.cities,
                    data.cities,
                    data.cities
                ];
                $('#citySelectWarp').html(template('citySelect',{'data':arr,'city':cities.join(',')}));
                main();

            });

            $.getJSON( COMMON+"/data/cities_2.json", function( data ) {

                System.search(data,function(k,v){
                    if('code' == k && '1302' == v){
                        console.log(this)
                        return false;
                    }
                });

            });

            function main(){
                citySelect.run();

                $('#citySelectWarp').on('click','[tree-input="checkbox"]',function(){
                    var $li = $(this).closest('li');
                    var $group = $li.find('[role="group"]');
                    if(this.checked){
                        $group.hide();
                    }else{
                        $group.show();
                    }



                });
            }



        });

    });

</script>



</body>
</html>